// 此静态组件用来展示歌单信息
<template>
  <div class="songListTop">
    <!-- 该图片来自父组件传递的值,用来做背景，需要对它进行虚化处理  通过filter属性 -->
    <img :src="musicTopData.coverImgUrl" alt="" />
    <div class="top">
      <div class="left">
        <svg class="icon" aria-hidden="true" @click="back">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
        <span>歌单</span>
      </div>
      <div class="right">
        <svg class="icon sousuo" aria-hidden="true" >
          <use xlink:href="#icon-sousuo1" ></use>
        </svg>
        <svg class="icon" aria-hidden="true" >
          <use xlink:href="#icon-gengduo1"></use>
        </svg>
      </div>
    </div>

    <div class="middle">
      <img :src="musicTopData.coverImgUrl" alt="" />
      <div class="Midright">
        <p>{{musicTopData.name}}</p>
        <div class="creator">
              <img :src="musicTopData.creator.avatarUrl" alt="">
              <span>{{musicTopData.creator.nickname}}</span>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
        <span>{{musicTopData.subscribedCount}}</span> 
      </div>
      <div class="box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
        <span>{{musicTopData.shareCount}}</span>
      </div>
      <div class="box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai1"></use>
        </svg>
        <span>下载</span>
      </div>
      <div class="box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-songlist-01"></use>
        </svg>
        <span>分享</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  props: ['musicTopData'],

 

  methods: {
    ...mapMutations(['CHOOSEWHICH']),
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.songListTop>img {
  width: 100%;
  height: 350px;
  position: fixed;
  top: 0;
  z-index: -1;
  filter: blur(20px);
}

.songListTop .top {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.songListTop .top .left,
.songListTop .top .right {
  display: flex;
  align-items: center;
  width: 80px;
  justify-content: space-between;
}
.songListTop .top .left span {
  font-size: 26px;
  color: white;
}
.icon {
  fill: white;
}

.middle{
    display: flex;
    padding: 15px;
}


.bottom{
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: 20px;
}
.bottom .box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle img{
    width: 180px;
    border-radius: 20px;
    margin-right: 20px;
}

.bottom span{
    color: white;
    font-size: 18px;
}
.middle .Midright p{
    color: white;
}

.middle .Midright img{
    border-radius: 50%;
    width: 45px;
}
.middle .Midright span{
    color: #ccc;
    font-size: 18px;
}
.middle .Midright .creator{
    margin-top: 10px;
    display: flex;
}
</style>